<template>
  <panel class="i-insurance" title="精选保险">
    <div class="container">
      <dl class="item">
        <dt>300W医疗险</dt>
        <dd>保大病|重疾|意外</dd>
        <dd>到65周岁可投保</dd>
        <dd class="fee"><span class="money">121</span><span>元起</span></dd>
      </dl>
      <dl class="item">
        <dt>百万重疾险</dt>
        <dd>不限社保确诊先赔</dd>
        <dd>销量TOP1</dd>
        <dd class="fee"><span class="money">48</span><span>元起</span></dd>
      </dl>
      <dl class="item">
        <dt>恶性肿瘤险</dt>
        <dd>不惧三高80岁可买</dd>
        <dd>父母孝心礼</dd>
        <dd class="fee"><span class="money">1108</span><span>元起</span></dd>
      </dl>
    </div>
  </panel>
</template>

<script>
import Panel from '@/components/core/panel.vue'

export default {
  components: {
    Panel
  }
}
</script>
<style lang="scss" scoped>
@import '~@/assets/css/element.scss';

.i-insurance {
  .container {
    @include list(row);
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 0 15px;
    .item {
      width: 31%;
      box-sizing: border-box;
      font-size: 22px;
      border: 1px solid #ccc;
      padding: 10px 10px 20px 25px;
      dt {
        font-size: 30px;
        font-weight: 700;
        line-height: 70px;
        color: #646C6D;
      }
      :nth-child(2) {
        color: #9297A1;
        line-height: 1.5;
        margin-bottom: 10px;
      }
      :nth-child(3) {
        display: inline-block;
        color: #CFB379;
        padding: 4px 6px;
        font-weight: 700;
        border: 1px solid #CFB379;
        margin-bottom: 20px;
      }
      .fee {
        text-align: left;
        .money {
          color: #FA5555;
          vertical-align: bottom;
          font-size: 50px;
        }
      }
    }
  }
}

</style>
